<!--
 * @Author: luoyong/471826078@qq.com
 * @Date: 2020-07-15 10:43:21
 * @LastEditors: zhangfan
 -->
<template>
  <div class="export">
    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="showExcel"
      width="716px"
      @close="closeExcel"
      :modal-append-to-body="false"
    >
      <div slot="title" class="dialogTitle">
        <p>
          导出报表
          <span
            >当出现导出excel页面空白等情况，可切换至谷歌/火狐浏览器操作</span
          >
        </p>
      </div>
      <div>
        <el-tabs v-model="activetab" @tab-click="handleClick">
          <el-tab-pane label="导出列字段" name="first">
            <div class="export_box_main">
              <el-tree
                v-if="show"
                :data="list"
                :props="defaultProps"
                show-checkbox
                node-key="id"
                :default-expand-all="true"
                :check-strictly="checkStrictly"
                :default-checked-keys="checkedKeys"
                :accordion="true"
                ref="columnTree"
              ></el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane label="导出行维度" name="second">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              label-position="top"
            >
              <el-form-item label="导出行业范围" prop="industryNameSelcted">
                <el-radio-group
                  v-model="ruleForm.industryNameSelcted"
                  @change="rowDimensionChange"
                >
                  <el-radio
                    label="total"
                    name="type"
                    style="padding: 5px 10px; display: block"
                    :disabled="isDisabled"
                    >只导出行业总计</el-radio
                  >
                  <el-radio
                    label="all"
                    name="type"
                    style="padding: 5px 10px; display: block"
                    :disabled="isDisabled"
                    >同时导出行业总计及各行业情况统计</el-radio
                  >
                  <el-radio
                    :label="industryNameValue"
                    name="type"
                    style="padding: 5px 10px; display: block"
                  >
                    <span>只导出某行业</span>
                    <el-select
                      v-model="industryNameValue"
                      placeholder="请选择"
                      @change="selectChanged"
                    >
                      <el-option
                        v-for="item in industryOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="导出投资类别范围"
                prop="investmentNameSelcted"
              >
                <el-radio-group
                  v-model="ruleForm.investmentNameSelcted"
                  @change="investmentNameSelctedChange"
                >
                  <el-radio
                    label="total"
                    name="type"
                    style="padding: 5px 10px; display: block"
                    >只导出投资类别总计</el-radio
                  >
                  <el-radio
                    label="all"
                    name="type"
                    style="padding: 5px 10px; display: block"
                    >同时导出投资类别总计及各类别情况统计</el-radio
                  >
                  <el-radio
                    :label="investmentNameValue"
                    name="type"
                    style="padding: 5px 10px; display: block"
                  >
                    <span>只导出某投资类别</span>
                    <el-select
                      v-model="investmentNameValue"
                      placeholder="请选择"
                      @change="selectinvestChanged"
                    >
                      <el-option
                        v-for="item in investmentNameList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeExcel" class="cancel">关闭</el-button>
        <el-button
          v-sdc
          type="primary"
          @click.native="confirmExcel('ruleForm')"
          class="save"
          >{{ btnValue }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import common from '../../kits/common'
import { mapState } from 'vuex'
export default {
  name: 'exportExcel',
  data() {
    return {
      show: true,
      isDisabled: false,
      investmentNameList: [
        { value: 'GOV', label: '政府投资' },
        { value: 'GOV_AND_SOCIETY', label: '政府与社会共筹' },
        { value: 'NATIONAL', label: '国企项目' },
        { value: 'NOT_GOV', label: '非政府投资' },
        { value: 'OTHERS', label: '其他工程项目' },
      ],
      industryNameValue: '',
      investmentNameValue: '',
      checkStrictly: false,
      activetab: 'first',
      defaultArr: [],
      selectMenuId: [],
      list: this.colmnList,
      checkedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      ruleForm: {
        industryNameSelcted: 'total',
        investmentNameSelcted: 'total',
      },
      rules: {
        industryNameSelcted: [
          { required: true, message: '请选择具体行业', trigger: 'change' },
        ],
        investmentNameSelcted: [
          { required: true, message: '请选择具体投资类别', trigger: 'change' },
        ],
      },
      btnValue: '导出',
    }
  },
  props: {
    excelTitle: {
      //导出单个表格时需传入 导出报表名称
      type: String,
      default: '导出报表',
    },
    showExcel: {
      type: Boolean,
      default: false,
      required: true,
    },
    rowDimensionList: {
      type: Array,
      required: true,
    },
    rowDimensionSelcted: {
      type: String,
    },
    colmnList: {
      type: Array,
      required: true,
    },
    activeName: {
      type: String,
    },
  },
  computed: {
    ...mapState(['industryOptions']),
  },
  created() {
    this.ishangyezhuguang()
  },
  methods: {
    ishangyezhuguang() {
      if (this.$store.state.userType == 'DIRECTOR') {
        this.isDisabled = true
        this.ruleForm.industryNameSelcted = this.industryNameValue
      }
    },
    selectChanged(value) {
      if (
        this.ruleForm.industryNameSelcted != 'all' &&
        this.ruleForm.industryNameSelcted != 'total'
      ) {
        this.ruleForm.industryNameSelcted = value
      }
    },
    selectinvestChanged(value) {
      if (
        this.ruleForm.investmentNameSelcted != 'all' &&
        this.ruleForm.investmentNameSelcted != 'total'
      ) {
        this.ruleForm.investmentNameSelcted = value
      }
    },
    /**
     * @description: 行维度选择
     */
    rowDimensionChange() {
      // this.$emit("getSelctedVal",this.rowDimensionSelcted)
      console.log(this.ruleForm)
    },
    /**
     * @description: 行维度选择
     */
    investmentNameSelctedChange() {
      // this.$emit("getSelctedVal",this.rowDimensionSelcted)
      console.log(this.ruleForm)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 获取默认导出的字段数组
    getTableAllLists() {
      this.getCheckedNode(this.list)
      // 给选中的节点前添加对号
      this.checkedKeys = this.defaultArr
    },
    //设置选中节点为导出字段
    setDefauled(arr, list) {
      // for (let item of arr) {
      //   for (let items of list) {
      //     if (item == items.id) {
      //       items.isShow = true;
      //       // break;
      //     }
      //     console.log(items.children)
      //     if (items.children) {
      //       this.setDefauled(arr, items.children);
      //     }
      //   }
      // }
      for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < list.length; j++) {
          if (arr[i] == list[j].id) {
            list[j].isShow = true
          }
          if (list[j].children) {
            this.setDefauled(arr, list[j].children)
          }
        }
      }
    },
    closeExcel() {
      this.$emit('closeExcel', {})
    },
    //所有默认导出设置为否
    setDefaultFalse(arr) {
      // let arrList = []
      // arrList = arr.slice(1)
      for (let item of arr) {
        item.isShow = false
        if (item.children) {
          this.setDefaultFalse(item.children)
        }
      }
    },
    getCheckedNode(arr) {
      for (let item of arr) {
        if (item.isShow) {
          this.defaultArr.push(item.id)
          //   break;
        }
        if (item.children) {
          this.getCheckedNode(item.children)
        }
      }
    },
    confirmExcel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.checkStrictly = false
          const arr = this.$refs.columnTree
            .getCheckedKeys()
            .concat(this.$refs.columnTree.getHalfCheckedKeys())
          this.setDefaultFalse(this.list)
          this.setDefauled(arr, this.list)
          this.defaultArr = []
          this.getCheckedNode(this.list)
          if (!this.defaultArr.length) {
            this.$message({
              type: 'warning',
              message: '导出字段为空!',
            })
          } else {
            if (!this.activeName) {
              const paramsArr = []
              this.list.forEach((item, index) => {
                if (item.isShow) {
                  let obj = {}
                  let fileds = []
                  obj.status = 'STARTED'
                  obj.exportType =
                    index == 0 ? 'PROJECT_IMPROVE_S' : 'PROJECT_IMPROVE'
                  item.children.forEach((items) => {
                    if (items.isShow) {
                      fileds.push(items.prop)
                    }
                  })
                  if (index <= 9) {
                    obj.type = index == 0 ? '' : '0' + index
                  } else {
                    if (this.list.length == 11) {
                      obj.type = index == 0 ? '' : 11
                    } else {
                      obj.type = index == 0 ? '' : index
                    }
                  }

                  obj.field = fileds.join(',')
                  paramsArr.push(obj)
                }
              })
              // get 请求下载
              window.location.href =
                common.commonApi +
                `api-s/cs/statsprojectimprove/exportProjectImproveS?access_token=` +
                localStorage.getItem('access_token') +
                '&improveListStr=' +
                encodeURI(JSON.stringify(paramsArr)) +
                '&industry=' +
                this.ruleForm.industryNameSelcted +
                '&invest=' +
                this.ruleForm.investmentNameSelcted
            }

            this.$emit('getExportList', this.list)
          }
        } else {
          return false
        }
      })
    },
  },
  mounted() {
    this.getTableAllLists()
  },
}
</script>
<style lang="less" scoped>
.export {
  &_box {
    position: relative;
    margin: 15vh auto;
    width: 716px;
    border-radius: 8px;
    background-color: #fff;

    &_main {
      min-height: 100px;
      padding: 5px 0;
      min-height: 200px;
      //   max-height: 600px;
      overflow: auto;
      .el-checkbox {
        display: block;
        line-height: 40px;
      }
      &_title {
        display: flex;
        height: 50px;
        align-items: center;
      }
      .el-checkbox-group {
        margin-left: 50px;
      }
    }
  }
}
.el-button--primary.is-disabled {
  background-color: gray;
  border-color: gray;
}
.dialogTitle p {
  color: #333;
  font-size: 18px;
  line-height: 24px;
  span {
    font-size: 14px;
    color: #999;
    line-height: 24px;
  }
}
/deep/ .el-dialog__body {
  padding: 0px 20px;
}
</style>
